<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #panel {
            border: 1px solid black;
            width: 300px;
            margin-left: 100px;
            position: absolute;
            left: 100px;
            top:500px
        }

        #panel .head {
            background-color: aquamarine;
            height: 30px;
            padding: 10px;
            cursor: pointer;

        }

        #panel .content {
            border-top: 1px solid black;
            height: 50px;
            display: none;
            padding: 10px;
        }

        #bg {
            border: 1px solid black;
            width: 300px;
            margin-left: 30px;
            padding: 10px;
        }

        #bg textarea {
            width: 280px;
            height: 80px;
            overflow: hidden;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="panel">
        <h4 class="head">折叠菜单</h4>
        <div class="content"> 菜单内容 </div>
    </div>
    <div id="bg">
        <input type="button" value="放大" />
        <input type="button" value="缩小" /><br />
        <textarea>
            四川信息职业技术学院是经四川省人民政府批准、教育部备案的全省唯一一所电子信息类公办高等职业院校，始建于1976年，隶属于四川省经济和信息化厅，是四川省示范性高职院校、省优质高职院校建设培育单位、国家高技能人才培训基地、全国“职业院校数字校园建设实验校”、四川省教育信息化试点单位。
        </textarea>
    </div>
    <script>
        $(function () {
            $("[value='放大']").click(function(){
                //判断是否正在执行动画
                if(!$("textarea").is(":animated")){
                    if($("textarea").height()<250){
                        $("textarea").animate({"height":"+=50px"},500); 
                    }   
                }
            
            });
            $("[value='缩小']").click(function(){
                if($("textarea").height()>80){
                    $("textarea").animate({"height":"-=50px"},500); 
                }    
            });
            $(".head").click(function () {
                $("#panel").animate({
                    "left": "+=500px",
                    "top": "300px"
                }, 3000, function () {
                    $(".content").fadeIn(4000);
                });
            });
            $("#panel").click(function(){
                $(this).animate({
                    "left":"400px",
                    "height":"200px",
                    opacity:"0.7"},3000)
                    .animate({top:"200px",width:"200px"},3000,function(){
                        $(this).css("border","10px solid red"); 
                    })
                    
            });
        });
    </script>
</body>

</html>